import { _decorator, Node, Label, Button } from 'cc';
import { Sprite } from 'cc';
import { color } from 'cc';
import { BaseView } from '../../../../scripts/libs/rxjs/cc3/BaseView';
import { ReactiveNumber } from '../../../../scripts/libs/rxjs/cc3/ReactiveNumber';
import { BindButton } from '../../../../scripts/libs/rxjs/cc3/BindButton';
import { Colors } from '../../game/basic';
import { Observable, Observer } from 'rxjs';
const { ccclass, property, executeInEditMode } = _decorator;

@ccclass('EditorColorItem')
@executeInEditMode
export class EditorColorItem extends BaseView {

    idx: number = 0;

    @property(ReactiveNumber)
    _colorId: ReactiveNumber = ReactiveNumber.DefaultValue(0);
    @property
    get colorId(): number { return this._colorId.value }
    set colorId(v: number) { this._colorId.Value = v; }

    @property(Label)
    colorIdLabel: Label = null;

    @property(Sprite)
    colorSprite: Sprite = null;

    @property(Button)
    selfButton: Button = null;

    useObserves() {
        return [
            this._colorId.subscribe(this.refreshColor.bind(this)),
            BindButton(this.selfButton).subscribe(this.selfButtonClicked.bind(this)),
        ];
    }

    refreshColor() {
        this.colorIdLabel.string = `(C)olorId: ${this.colorId}`;
        this.colorSprite.color = Colors[this.colorId] ?? color(0, 0, 0);
    }

    selfButtonClicked() {
        if (this._observer != null) this._observer.next(null);
    }

    _observer: Observer<any> = null;
    asButtonClickObservable() {
        return new Observable(observer => {
            this._observer = observer;
        });
    }

}


